<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .demo{
            width: 600px;
            padding: 30px;
            background-color: #666;
            margin:20px auto;
            text-align: center;
            font:bold 80px/100% "微软雅黑";
            color: #fff;
        }
        /*添加阴影 text-shadow:offsetX offsetY blur color*/
        .demo1{
            box-shadow: -2px -2px 0px pink,-3px -3px 0px skyblue,-4px -4px 0px orange;
            text-shadow: 2px 2px 5px red;
        }
        .demo2{
            text-shadow: 0px 0px 30px #fff;
        }
        /*多层阴影效果*/
        .demo3{
            text-shadow: 0px 0px 30px #fff,0px 0px 50px red,0px 0px 70px #fff;
        }
        .demo4{
            color: black;
            text-shadow: 0px 1px 0px #fff;
        }
        /*浮雕立体效果*/
        .demo5{
            color: #fff;
            text-shadow: -1px -1px 0px #eee,-2px -2px 0px #ddd,-3px -3px 0px #ccc;
        }
        .demo6{
            color: transparent;
            text-shadow: 0px 0px 8px hsla(30,100%,30%,1);
        }
    </style>
</head>
<body>
<div class="demo demo1">御剑乘风来</div>
<div class="demo demo2">御剑乘风来</div>
<div class="demo demo3">御剑乘风来</div>
<div class="demo demo4">御剑乘风来</div>
<div class="demo demo5">御剑乘风来</div>
<div class="demo demo6">御剑乘风来</div>
<div class="demo demo7">御剑乘风来</div>
</body>
</html>